<template>
		<div>
			<el-menu
					:default-openeds="['1']"
					:default-active="activeName"
					:collapse="isCollapse"
					class="el-menu-vertical-demo"
					@open="handleOpen"
					@close="handleClose"
					background-color="#fff"
					text-color="#0F212E"
					router
					>
				<el-submenu index="1" style="width: 200px;">
					<template slot="title">
						<i class="iconfont">&#xe60d;</i>
						<span>检测中心</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="finaceCheck">
							<i class="iconfont">&#xe60d;</i>
							财务检测
						</el-menu-item>
						<el-menu-item index="threeCheck">
							<i class="iconfont">&#xe60b;</i>
							第三方检测
						</el-menu-item>
					</el-menu-item-group>
					<el-menu-item index="manyFileOne">
						<i class="iconfont">&#xe611;</i>
						多文件一致性
					</el-menu-item>
					</el-menu-item-group>
					</el-menu-item-group>
					<el-menu-item index="ocrcheck">
						<i class="iconfont">&#xe60e;</i>
						ORC检测
					</el-menu-item>
					</el-menu-item-group>
					</el-menu-item-group>
					<el-menu-item index="otherNumber">
						<i class="iconfont">&#xe60c;</i>
						其他数值
					</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
			<el-radio-group class='menu-button' v-model="isCollapse">
				<el-radio-button class='menu-button-right' :label="false" v-show='isCollapse'><i class="el-icon-arrow-right"></i></el-radio-button>
				<el-radio-button class='menu-button-left' :label="true" v-show='!isCollapse'><i class="el-icon-arrow-left"></i></el-radio-button>
			</el-radio-group>
		</div>
</template>

<script>
export default {
  name: 'navSide',
  data () {
    return {
    //   activeName: "finaceCheck"
      isCollapse: false
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  computed: {
    activeName: function () {
      return this.$route.path.replace('/', '')
    }
  }

//   mounted: function() {
//     let url = window.location.href;
//     let finaceCheck = /.*(finaceCheck).*/;
//     let threeCheck = /.*(threeCheck).*/;
//     let manyFileOne = /.*(manyFileOne).*/;
//     let ocrcheck = /.*(ocrcheck).*/;
//     let otherNumber = /.*(otherNumber).*/;
//     switch (true) {
//       case finaceCheck.test(url):
//         this.activeName = "finaceCheck";
//         console.log(this.activeName);
//         break;
//       case threeCheck.test(url):
//         this.activeName = "threeCheck";
//         break;
//       case manyFileOne.test(url):
//         this.activeName = "manyFileOne";
//         break;
//       case ocrcheck.test(url):
//         this.activeName = "ocrcheck";
//         break;
//       case otherNumber.test(url):
//         this.activeName = "otherNumber";
//         break;
//       default:
//         break;
//     }
//   }

}
</script>

<style>

</style>
